<style lang="less"scoped="scoped">
	a{
		font-size: .12rem;
		color: darkgray;
		line-height: .5rem;
		}
	.nav{
		top: .5rem;
		display: block;  
		z-index: 999;
		position: fixed;
		width: 100%;
		background-color: rgba(0,0,0,.5);
	}
		
		
	.list{
			width: 70%;
			height: 100%;
			position: absolute;
			z-index: 999;
			display: flex;
			flex-direction: column;
			background-color: #282828;

		}
	li{
		width: 100%;
		height: .5rem;
		border-bottom: .01rem solid #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 .16rem;
		font-size: .12rem;
		color: darkgray;
		
		.van-icon{
			color: darkgray;
			font-size: .12rem;
		}
	}
.opt-enter{
	opacity: 0;
	
}
.opt-enter-active{
	transition: all 2s;
}
.opt-leave-active{
	transition: all 2s;

	
}
.opt-leave-to{
	opacity: 0;

	
}
.fade-enter{
	transform: translateX(-70%);
}
.fade-enter-active{
	transition: all ease 1s;
	
}
.fade-leave-active{
	transition: all ease 1s;
}
.fade-leave-to{
	transform: translateX(-100%);
}
</style>


<template>
	
		<transition name="opt">
			<div class="nav" @click="toggle" v-show="flag">
				<transition name="fade">
					<ul class="list" v-show="flag">
						<router-link to="/">
							<li class="home">
								<span>首页</span>
								<van-icon name="arrow" />
			
							</li>
						</router-link>
						<router-link to="films/now-playing">
							<li class="film">
								<span>影片</span>
								<van-icon name="arrow" />
							</li>
						</router-link>
						
						<router-link to="/Cinema">
							<li class="cinema">
								<span>影院</span>
								<van-icon name="arrow" />
							</li>
						</router-link>
						
						<router-link to="">
							<li class="mall">
								<span>商城</span>
								<van-icon name="arrow" />
							</li>
						</router-link>
						
						
							<li class="me" @click="jump">
								<span>我的</span>
								<van-icon name="arrow" />
							</li>
						
						
						<router-link to="">
							<li class="card">
								<span>卖座卡</span>
								<van-icon name="arrow" />
							</li>
						</router-link>
					</ul>
				</transition>
			</div>
		</transition>								
			
				
			
	
	
	
</template>
	

<script>
	import { Icon } from 'vant'
	import { mapGetters } from 'vuex'
	export default{
		data(){
			return{
				
			}
		},
		
		components:{
			[Icon.name]:Icon
		},
		
		computed: {
			...mapGetters(['flag','isLogin'])
		},
		
		methods:{
			toggle(){
				if(this.flag){    
		  			this.$store.commit('isFlag',false);
		  		}else{
		  			this.$store.commit('isFlag',true);
		  		}
			},
			
			jump(){
				if(this.isLogin){
					
					this.$router.push({path:'./Person'});
					
				}else{
					this.$router.push({path:'./SignIn'});
					
					
				}
			}
		}
	}



		  			
</script>
	
	
	
	
	
		
		
			
	


